<template>
    <div>
        <div>
            <!--当前处理环节-->
            <el-row class="flow-detail-row">
              <el-col :span="4" class="flow-detail-col1" >{{$t('ndt.now_deal_actor')}} <span>&nbsp;</span></el-col>
              <el-col :span="6" class="flow-detail-col2">{{flow_access.act_name}}</el-col>
            </el-row>
            <!--处理结论-->
            <el-row class="flow-detail-row" v-if="!isStartAct" >
              <el-col :span="4" class="flow-detail-col1" >{{$t('ndt.deal_result')}}  <span style="color:red">*</span> </el-col>
              <el-col :span="6" class="flow-detail-col2">
                <el-radio  @change="triggerAgree()" v-model="flow_access.deal_answer" label="1">{{$t('ndt.aggre')}}</el-radio>
                <el-radio  @change="triggerBack()" v-if="procObj.showBack" v-model="flow_access.deal_answer" label="2">{{$t('ndt.reback')}}</el-radio>
              </el-col>
            </el-row>
            <!--下一步处理环节-->
            <el-row class="flow-detail-row" v-show="flow_access.deal_answer !== '2'">
              <el-col :span="4" class="flow-detail-col1" >{{$t('ndt.next_b_actor')}} <span style="color:red">*</span></el-col>
              <el-col :span="6" class="flow-detail-col2">
                <el-select v-model="flow_access.next_deal_act" @change="changeAct" size="small">
                    <el-option v-for="(i,index) in options" :label="i.actName" :key="index" :value="i.actMetadata" >
                    </el-option>
                </el-select>
              </el-col>
            </el-row>
            <!--下一步处理人-->
            <el-row  class="flow-detail-row" v-show="!(flow_access.deal_answer == 1 && flow_access.isEnd)">
              <el-col :span="4" class="flow-detail-col1" >{{$t('ndt.next_deal_man')}} <span style="color:red">*</span> </el-col>
              <el-col :span="6" class="flow-detail-col2" v-show="flow_access.deal_answer !== '2'">
                <PersonSelect size="small" key="1" id="appMan"  :value="dealer" :selectedValue="dealerId"  @participantChange="participantChange"  v-bind:multiple="true"  ></PersonSelect>
              </el-col>
              <el-col :span="6" class="flow-detail-col2">
                  <div>
                    <el-radio-group v-model="flow_access.next_deal_name" @change="handleParticipantChang2">
                      <el-radio class="chk-br" v-for="(i,index) in dealmans" :label="i" :key="index">{{i}}</el-radio>
                    </el-radio-group>
                    <!-- <el-checkbox-group  v-model="flow_access.next_deal_name" @change="handleParticipantChange">

                      <el-checkbox class="chk-br" v-for="(i,index) in dealmans" :label="i" :key="index"   >{{i}}</el-checkbox>

                    </el-checkbox-group> -->
                  </div>
                  <div v-if="flow_access.deal_answer == 1 && flow_access.isEnd" >流程结束</div>
                  <div v-if="flow_access.deal_answer === '2'">{{procObj.showBackMan}}</div>
              </el-col>
            </el-row>

            <!--抄送-->
            <el-row class="flow-detail-row" v-if="!isStartAct" v-show="flow_access.deal_answer !== '2'">
              <el-col :span="4" class="flow-detail-col1" >{{$t('ndt.write_send')}} <span>&nbsp;</span></el-col>
              <el-col :span="6" class="flow-detail-col2">
                <PersonSelect size="small" key="2"  id="sendToMan"   v-bind:multiple="true"  ></PersonSelect>
              </el-col>
            </el-row>

            <!--处理结论-->
            <el-row class="flow-detail-row" v-if="!isStartAct">

              <el-row>
                  <el-col :span="4" class="flow-detail-col1" >{{$t('ndt.approve_suggest')}}</el-col>
                  <el-col :span="10" class="flow-detail-col2">
                    <el-input type="textarea" v-model="flow_access.deal_suggest" ></el-input>
                  </el-col>
              </el-row>

              <el-row>
                  <el-col :span="4" class="flow-detail-col1" >&nbsp;</el-col>
                  <el-col :span="10" class="flow-detail-col2">
                      <div class="flow_approve" >

                          <span @click="selectText($event)" class="flow-collapse-deal1" >同意!</span>
                          <span @click="selectText($event)" class="flow-collapse-deal2" >同意，请快速处理，谢谢!</span>
                          <span @click="selectText($event)" class="flow-collapse-deal3" >退回!</span>
                      </div>

                      <div class="flow_approve" >
                          <span  @click="selectText($event)" class="flow-collapse-deal4">不同意，请确认材料无误后再申请！</span>
                      </div>
                  </el-col>
              </el-row>
            </el-row>

          </div>
    </div>
</template>

<script>
import PersonSelect from '@/components/asc/PersonSelect'
import {
  getCurrentUserDetail,
  getCurrentUserBoss
} from '@/api/api.js'
export default {
    //参数说明  procObj 下一环节处理人以及处理环节  flow_access 流程基本信息  isStartAct 是否开始节点
    props:{
      procObj:{ type:Object, default:null},
      flow_access:{ type:Object, default:null},
      isStartAct:{ type:Boolean,default:false},
      isDraft:{ type:Boolean,default:false}
    },
    components:{
      PersonSelect
    },
    data() {
        return {

            //下一环节处理  这个应该从服务端获取
            options:this.procObj.determinate == 2?this.procObj.actOptions : this.procObj.nextActOptions,
            //下一处理人  这个应该根据流程从服务端获取
            dealmans:[],
            dealerId:"",
            dealer:"",
            showResel:false,
            //之前的判断太复杂，新增判断条件，存在处理人则显示处理人，不存在处理人则选择选人框
            showPersonSlect:true
        }
    },
    methods: {
      participantChange:function(val) {
        console.log("par change",val);
        this.flow_access.participantSelectRestlt = val;
      },
      selectText:function(e){
        let text = e.currentTarget.innerHTML;
        this.flow_access.deal_suggest = text;
      },
      changeAct:function(val){
        let index = 0;
        if(!this.procObj.showBack){  //非退回节点

        /******************旧的处理逻辑开始*****************/
        // 判断是否退回节点 找到option所在的位置
          // this.procObj.nextActOptions.some(o => {
          //   if(o.actMetadata != val){
          //     ++index;
          //   }
          //   return (o.actMetadata == val);
          // });
          // //匹配处理人 // 2020.10.11修改过
          // this.procObj.personOptions = this.procObj.approvePerson[index];
          // // this.dealmans = [this.procObj.personOptions];
          // // this.dealer = this.procObj.approvePerson[index];
          // this.dealmans = this.procObj.personOptions;
          // this.dealer = this.procObj.approvePerson[index].join(",");
          // this.procObj.isFastApprove = this.procObj.nextActOptions[index] && this.procObj.nextActOptions[index].isReselFastDealer == "1"?true:false;
          // this.showResel = this.procObj.nextActOptions[index] && this.procObj.nextActOptions[index].isReselFastDealer == "1"?true:false;
        /******************旧的处理逻辑结束*****************/

          this.procObj.nextActOptions.some(o => {
            if(o.actMetadata != val){
              ++index;
            }
            return (o.actMetadata == val);
          });
          this.procObj.isFastApprove = this.procObj.nextActOptions[index] && this.procObj.nextActOptions[index].isReselFastDealer == "1"?true:false;

          if(this.procObj.actParticipants[val]) {
            //假如处理人存在，则显示处理人checkbox
            let users = this.procObj.actParticipants[val];
            var participants = [];
            for(let i = 0; i < users.length; i++){
                if(typeof(users[i].item_principal_desc) != "undefined" && typeof(users[i].item_principal_desc) != null){
                    participants.push("["+users[i].item_principal+"]"+users[i].item_principal_desc);
                }
            }
            this.dealmans = participants;
            // 勾选人员的时候再把数据带入选人框
            // this.dealer = participants.join(",");
          }
          // else{
          //   //处理人不存在，则显示选人框，从组织机构中选择
          //   this.showPersonSlect = true;
          // }

          if(val == "END"){
              this.flow_access.isEnd = true
          }

        }else{//退回节点
          this.procObj.backAct.some(o => {
            if(o != val){
              ++index;
            }
            return (o == val);
          });
          //匹配处理人
          this.procObj.showBackMan= "["+this.procObj.backMan[index]+"]"+this.procObj.backManName[index];
        }
      },
      handleParticipantChange: function(value){
        this.dealer = value.join(",");
      },
      handleParticipantChang2: function(value){
        this.dealer = value;
      },
      triggerAgree:function(){
        //切换下一环节和下一审批人
        this.options = this.procObj.nextActOptions;
        this.procObj.personOptions = this.procObj.approvePerson[0];
        this.flow_access.next_deal_act = this.options[0].actMetadata;
        if(this.flow_access.next_deal_act == 'END'){
           this.flow_access.isEnd = true
        }else{
           this.flow_access.isEnd = false
        }
        this.flow_access.deal_suggest = "同意!";
        this.dealmans = this.procObj.personOptions;
      },
      triggerBack:function(){
        //切换下一环节和下一处理人
        //:label="i.actName" :key="i.actMetaData" :value="i.actMetaData"
        this.options = [];
        for(let i = 0; i < this.procObj.backAct.length; i++){
            let option = {actName:this.procObj.backActName[i],actMetadata:this.procObj.backAct[i]};
            this.options.push(option);
        }
        this.flow_access.next_deal_act = this.options[0].actMetadata;
        this.procObj.showBackMan= this.procObj.backManName[0]+"["+this.procObj.backMan[0]+"]";
        this.flow_access.deal_suggest = "退回!";
      },
      initData:function(){
        console.log("procApprove---initData");
        //处理环节默认第一个
        //下一步处理人activityName 通过下一节点的会签类型和是否重选快速审批来判断
        this.showResel = this.procObj.nextActOptions[0] && this.procObj.nextActOptions[0].isReselFastDealer == "1" ? true : false;
        if(this.procObj.activityName.indexOf("010")>-1 && this.procObj.isEnd == false){//开始节点
          this.dealmans = this.procObj.approvePerson;
          this.flow_access.next_deal_act = this.procObj.nextActOptions[0] && this.procObj.nextActOptions[0].actMetadata;
          this.dealerId = this.procObj.approvePersonId.join(",");
          this.dealer = this.procObj.approvePerson.join(",");
          if(typeof(this.flow_access.draftId) != "undefined"){ //代表草稿
            if(document.getElementById("appMan") != null){
              this.dealer = this.flow_access.next_deal_name.join(",");
              document.getElementById("appMan").value = this.flow_access.next_deal_name.join(",");
              console.log("233---initData",document.getElementById("appMan").value);
            }else{
              console.log("238---initData",document.getElementById("appMan").value);
            }
            this.dealerId = this.flow_access.next_deal_id.join(",");
          }else{
            //设置下一步处理人  暂时不考虑串行会签和并行会签
            if(document.getElementById("appMan") != null){
              //document.getElementById("appMan").value = this.procObj.approvePerson.join(",");
              //console.log("240---initData",document.getElementById("appMan").value);
              //console.log("241---initData",this.type);
              this.getNowUser();

             // document.getElementById("appMan").value="[asdasd]";
            }
          }
        }else{
          this.flow_access.deal_answer = this.procObj.determinate;
          this.flow_access.next_deal_act = this.procObj.next_actor;

          this.dealmans = this.procObj.personOptions;
          console.log("255---initData",this.dealmans);
          this.getNowUser();
          if(this.procObj.personOptions) {
            this.dealer =  this.procObj.personOptions.join(",");

          }

        }

        this.changeAct(this.flow_access.next_deal_act);

      },
      sleep(millsecond){
        let _this = this;
        return new Promise(resolve => {
          setTimeout(()=>{
            _this.initData();
          },millsecond);
        })
      },
      getNowUser () {
          let _this = this;
          getCurrentUserDetail({}).then((result) => {
            if (result.status == "200" && result.data.code == "0") {
              _this.getPersonBoss(result.data.data.userId);
            } else {
              _this.$alert(result.data.msg, _this.$t('cm.tips'));
            }
          }).catch((err) => {
            _this.$alert(err,_this.$t('cm.tips'));
          });
        },
        //测试当前用户的直属上司  需要配合api.js
      getPersonBoss(userid){
          let _this = this;
          console.log("----87---_this.staffNo",userid);
          getCurrentUserBoss(userid).then((result) => {
            if (result.status == "200" && result.data.code == "0") {
              //var haha =result.data.data;
              //console.log("++", "hha")
              if (result.data.length > 0){
                //console.log("--", "xxi")
              var staffNovalue = result.data.data[0].staffNo;
              var staffNamevalue = result.data.data[0].staffName;
              if (staffNovalue.length > 0 && staffNamevalue.length > 0) {
                name = "[" + staffNovalue + "]" + staffNamevalue;
                console.log("----997---" + name);
                if (this.flow_access.next_deal_name.length == 0) {
                  document.getElementById("appMan").value = name;
                  console.log("----998---", document.getElementById("appMan").value);
                }
              }
            }
            } else {
              _this.$alert(result.data.msg, _this.$t('cm.tips'));
            }
          }).catch((err) => {
            _this.$alert(err,_this.$t('cm.tips'));
          });
      },
    },
    created() {
    },
    mounted() {
      this.$nextTick(function(){
        //初始化数据
        this.sleep(1000);
      })
    },
    computed: {
      nowUser:function(){
        return this.$root.NOW_USER;
      }
    },
    watch: {
      nowUser:function(val){
        document.getElementById("appMan").value = document.getElementById("nowUser").innerText;
        console.log("280---initData",document.getElementById("nowUser").innerText);
      },
      'this.procObj.nextActOptions':function(){
        this.initData();
      },
      'this.procObj.approvePerson':function(arr){
          document.getElementById("appMan").value = this.procObj.approvePerson.join(",");
          this.dealer = this.procObj.approvePerson.join(",");
          console.log("288---initData",this.dealerId);
      },
      'this.procObj.approvePersonId':function(){
        if(typeof(this.flow_access.draftId) == "undefined"){
          this.dealerId = this.procObj.approvePersonId.join(",");
          console.log("292---initData",this.dealerId);

        }
      }

    },
}
</script>

<style scoped>
  .flow-collapse-deal1{
    cursor:default;color:#9f988d;border:1px solid #e7ddce;padding-left:10px;padding-right:10px;
  }
  .flow-collapse-deal2{
    cursor:default;color:#9f988d;border:1px solid #e7ddce;padding-left:10px;padding-right:10px;
  }
  .flow-collapse-deal3{
    cursor:default;color:#9f988d;border:1px solid #e7ddce;padding-left:9px;padding-right:9px;
  }
  .flow-collapse-deal4{
    cursor:default;color:#9f988d;border:1px solid #e7ddce;padding-left:10px;padding-right:59px;
  }

  .chk-br{
    display: table;
    margin-left:0px;
  }
</style>
